<template>
    <div style="padding: 0 60px;">
        <logoHand :remarkText="logoRemarkText"/>
        <div style="margin-top: 10px">
            <van-field v-model="phone" label="" placeholder="请输入手机号"/>
            <van-field style="padding-top: 10px;" v-model="code" label=""
                       placeholder="请输验证码">
                <template #button>
                    <van-button :style="codeColor" size="mini" @click="getCode"
                                :disabled="codeText==='获取验证码'?false:true">{{ codeText }}
                    </van-button>
                </template>
            </van-field>

            <div style="font-size: 10px;display: flex;margin-top: 10px;padding-left:3px;padding-right: 3px; justify-content: space-between">
                <div>
                    <van-icon name="exchange" @click="toPass">密码登录</van-icon>
                </div>
                <div>
                    手机号无法使用
                </div>

            </div>
            <div style="margin-top: 10px">
                <van-button width="100%" :style="color" :loading="loginLoading" loading-type="spinner"
                            :disabled="loginDisabled" round @click="toLogin">验证并登录
                </van-button>
            </div>

                    <div style="margin-top: 10px; font-size: 10px;padding: 0 10px 0 10px;">
                        <van-checkbox v-model="checked" icon-size="10px" >我已阅读并同意<a href="">《用户协议》</a><a href="">《隐私政策》</a><a href="">《儿童/青少年个人信息保护规则》</a></van-checkbox>
                    </div>

<!--            <div class="read">
                <span class="checkbox-with-text">
                    <van-checkbox v-model="checked" icon-size="10px"></van-checkbox>
                    <span style="color: #888888">我已阅读并同意</span>
                </span>
                <a class="login_a" href="">《用户协议》</a>
                <a class="login_a" href="">《隐私政策》</a>
                <a href="">《儿童/青少年个人信息保护规则》</a>
            </div>-->

        </div>
    </div>

</template>

<script setup>
import {ref, watch} from 'vue'
import {showToast} from "vant";
import {useRouter} from 'vue-router'

// 引入组件
import logoHand from '@/components/logo/logoHand.vue'


import {sendCode} from "@/api/sms";
import {login} from "@/api/login";

const logoRemarkText = ref('未注册的手机号登录成功后将自动注册')

const router = useRouter();

// 登录按钮样式
const color = ref("background-color: rgb(205, 205, 205);color: ##7f7f7f;")
// 获取验证码按钮样式
const codeColor = ref("background-color: red; color: white;")

const codeText = ref('获取验证码')
const loginLoading = ref(false)
const loginDisabled = ref(true)
const phone = ref('')
const code = ref('')

const checked = ref(false)

const loginParam = ref({
    username: phone.value,
    code: code.value,
    loginType: 'sms',
    userType: '10'
})


watch(phone, (newVal, oldVal) => {
    if (newVal.length !== 11) {
        color.value = 'background-color: rgb(205, 205, 205);color: ##7f7f7f;'
    } else {
        loginDisabled.value = false
        color.value = 'background-color: red;color: white;'
    }
    console.log()
})

const toLogin = () => {
    if (checkPhone() && checkCode() && checkBox()) {
        loginLoading.value = true
        loginParam.value.username = phone.value
        loginParam.value.code = code.value
        login(loginParam.value).then(res => {
            loginLoading.value = false
            // showToast(res.msg)
            localStorage.setItem('token', res.token)
            router.push("/")
        })
    }


}

const getCode = () => {
    if (checkPhone() && checkBox()) {
        sendCode({phone: phone.value, code: code.value}).then(res => {
            if (res.code == 200) {
                let n = 60;
                codeText.value = n + "S";
                const timer = setInterval(() => {
                    if (n === 0) {
                        clearInterval(timer);
                        codeColor.value = 'background-color: red;color: white;'
                        codeText.value = "获取验证码";
                    } else {
                        n--;
                        codeText.value = n + "S";
                    }
                }, 1000);
                codeColor.value = "background-color: rgb(246, 246, 246);"

            }
        })


    }


}

const toPass = () => {
    router.push('/passLogin')
}

const checkPhone = () => {
    if (!phone.value) {
        showToast('请输入手机号')
        return false;
    } else if (!regexPhone(phone.value)) {
        showToast('请检查手机号是否正确')
        return false;
    }
    return true;
}
const checkCode = () => {
    if (!code.value) {
        showToast('验证码不能为空')
        return false;
    } else if (!regexCode(code.value)) {
        showToast('验证码格式不正确')
        return false;
    }
    return true;
}

const checkBox = () => {
    if (!checked.value) {
        showToast('请勾选用户协议')
    }
    return checked.value
}

const regexPhone = (phoneNumber) => {
    const regex = /^1[3-9]\d{9}$/
    return regex.test(phoneNumber)
}

const regexCode = (codeVal) => {
    const regex = /^\d{6}$/
    return regex.test(codeVal)
}


</script>

<style>
.van-cell {
    padding: 0;
}

.van-button--default {
    border: none;
    width: 100%;
    margin-bottom: 3px;
}

.van-cell:after {
    width: 100%;
}
.van-field__control{
    padding-left: 15px;
}

/*.van-field__value {
    border-bottom: 0.09px solid #bab9b9;
}*/

.login_a{
    display:block;

}
.read{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    font-size: 10px;
    margin-top: 10px;
}


/* 如果需要确保 checkbox 和链接在同一行，可以给它也设置一个固定的宽度 */
.van-checkbox {
    flex-shrink: 0; /* 防止 checkbox 收缩 */
    text-align: left;
    align-items: flex-start; /* 将子元素顶部对齐 */
}
.van-checkbox__label {
    margin-left: var(--van-checkbox-label-margin);
    color: #888888;
    line-height: 10px;
}



</style>